<template>
    <div>
        <h2>房型的增加页面</h2>
        <table class="table table-bordered">
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" v-model="state.name">
                </td>
            </tr>

            <tr>
                <td>房型大小</td>
                <td>
                    <input type="text" v-model="state.daxiao">
                </td>
            </tr>

            <tr>
                <td>房型面积</td>
                <td>
                    <input type="text" v-model="state.mianji">
                </td>
            </tr>

            <tr>
                <td>房型的钱</td>
                <td>
                    <input type="text" v-model="state.money">
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="button" value="增加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">


import { toRefs, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data: any = reactive({
    state: {
        "name": "",
        "daxiao": "",
        "mianji": "",
        "money": "",
    },

});

let { state } = toRefs(data);

const add = () => {
    if (state.value.name == "") {
        alert("请输入名字");
        return;
    }
    if (state.value.daxiao == "") {
        alert("请输入大小");
        return;
    }
    if (state.value.mianji == "") {
        alert("请输入面积");
        return;
    }
    if (state.value.money == "") {
        alert("请输入钱");
        return;
    }
    let obj = {
        name: state.value.name,
        daxiao: state.value.daxiao,
        mianji: state.value.mianji,
        money: state.value.money,
    }

    axios({
        url: '/api/House/AddHouse/AddHouse',
        method: 'post',
        data: obj,
    }).then((res) => {
        if (res.data.data == 1) {
            alert("添加成功");
            router.push('/list')
        }
        else if (res.data.data == -1) {
            alert("房型名称不能重复");
            return;

        }
        else {
            alert("添加失败");
        }
    })
}
</script>

<style scoped></style>